<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta content="always" name="referrer">
<meta charset="utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<!-- 移动端必须的设置 -->
<meta name="viewport"
	content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<!-- 禁用电话号码检测功能，禁止对数字随便可以拨号 -->
<meta name="format-detection" content="telephone=no">
<!-- 禁用E-mail检测功能 -->
<meta name="format-detection" content="email=no">
<!-- 禁用地址检测功能，禁止跳转到地图 -->
<meta name="format-detection" content="address=no">
<!-- 在苹果设备上以全屏方式打开本网页 -->
<meta name="apple-mobile-web-app-capable" content="yes">
<!-- 设置在苹果设备上状态的颜色，默认白色，要设置成什么颜色以Web颜色的风格而定 -->
<meta name="apple-mobile-web-app-status-bar-style" content="white">
<title>途狗收油</title>
<link rel="stylesheet"
	href="../vendor/font-awesome/css/font-awesome.min.css" />
<link rel="stylesheet" href="../css/task-list.css" />
<script type="text/javascript" src="../js/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="../js/base64.js"></script>
<script type="text/javascript" src="../js/layui/layui.js "></script>
<script type="text/javascript" src="../js/salesman/salesman.js?v=1.6"></script>
<script type="text/javascript" src="../vendor/resize.js"></script>
<script type="text/javascript" src="../js/iscroll.js "></script>
<link rel="stylesheet" href="../js/layui/css/layui.css" />
<link rel="stylesheet" href="../vendor/iconfont/iconfont.css" />
<style type="text/css" media="all">
			#wrapper {
					position: absolute;
				z-index: 1;
				left: 0;
				height:100%;
				width: 100%;
				overflow: auto;
			}
			
			#scroller {
				position: relative;
				/* -webkit-touch-callout:none;*/
				-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
				float: left;
				width: 100%;
				padding: 0;
			}
			/**    *    * 下拉样式 Pull down styles    *    */
			
			#pullDown,
			#pullUp {
				background: #fff;
				height: 40px;
				line-height: 40px;
				padding: 5px 10px;
				border-bottom: 1px solid #ccc;
				font-weight: bold;
				font-size: 14px;
				color: #888;
			}
			#pullUp{
			display: none;
			}
			#pullDown .pullDownIcon,
			#pullUp .pullUpIcon {
				display: block;
				float: left;
				width: 40px;
				height: 40px;
				background: url() 0 0 no-repeat;
				-webkit-background-size: 40px 80px;
				background-size: 40px 80px;
				-webkit-transition-property: -webkit-transform;
				-webkit-transition-duration: 250ms;
			}
			
			#pullDown .pullDownIcon {
				-webkit-transform: rotate(0deg) translateZ(0);
			}
			
			#pullUp .pullUpIcon {
				-webkit-transform: rotate(-180deg) translateZ(0);
			}
			/**    * 动画效果css3代码    */
			
			#pullDown.flip .pullDownIcon {
				-webkit-transform: rotate(-180deg) translateZ(0);
			}
			
			#pullUp.flip .pullUpIcon {
				-webkit-transform: rotate(0deg) translateZ(0);
			}
			
			#pullDown.loading .pullDownIcon,
			#pullUp.loading .pullUpIcon {
				background-position: 0 100%;
				-webkit-transform: rotate(0deg) translateZ(0);
				-webkit-transition-duration: 0ms;
				-webkit-animation-name: loading;
				-webkit-animation-duration: 2s;
				-webkit-animation-iteration-count: infinite;
				-webkit-animation-timing-function: linear;
			}
			
			@-webkit-keyframes loading {
				from {
					-webkit-transform: rotate(0deg) translateZ(0);
				}
				to {
					-webkit-transform: rotate(360deg) translateZ(0);
				}
			}
		</style>
</head>
<body>
	<%@ include file="../basejsp.jsp"%>
	<!--   <a onclick=" clearCookieAll()" id="aaa">退出</a> -->
	<!-- <div class="header">
		  <a onclick=" clearCookieAll()">退出</a>
		</div>
	<div class="main"></div> -->


	<div id="wrapper">
		<div id="scroller">
			<div id="pullDown">
				<span class="pullDownIcon"></span><span class="pullDownLabel">下拉刷新...</span>
			</div>
			<div class="header">
				<!-- <a onclick=" clearCookieAll()">退出</a> -->
			</div>
			<div id="thelist" class="main" style="margin-top: 0">
			</div>
			<div id="pullUp">
				<span class="pullUpIcon"></span><span class="pullUpLabel">上拉加载更多...</span>
			</div>
		</div>
	</div>
	<script type="text/javascript">
		$(function() {
			findlist(getCookie("salesmaniphone"), "", 9)
		})
		var myScroll, pullDownEl, pullDownOffset, pullUpEl, pullUpOffset, generatedCount = 0; /**  * 下拉刷新 （自定义实现此方法）  * myScroll.refresh();  // 数据加载完成后，调用界面更新方法  */
			function pullDownAction() {
					myScroll.refresh();
					findlist(getCookie("salesmaniphone"), "", 9)
			} /**  * 滚动翻页 （自定义实现此方法）  * myScroll.refresh();  // 数据加载完成后，调用界面更新方法  */
			function pullUpAction () {  
					    myScroll.refresh(); 
			}
			/**  * 初始化iScroll控件  */
			function loaded() {
				pullDownEl = document.getElementById('pullDown');
				pullDownOffset = pullDownEl.offsetHeight;
				pullUpEl = document.getElementById('pullUp');
				pullUpOffset = pullUpEl.offsetHeight;
				myScroll = new iScroll('wrapper', {
					scrollbarClass: 'myScrollbar',
					/* 重要样式 */
					useTransition: false,
					/* 此属性不知用意，本人从true改为false */
					topOffset: pullDownOffset,
					onRefresh: function() {
						if (pullDownEl.className.match('loading')) {
							pullDownEl.className = '';
							pullDownEl.querySelector('.pullDownLabel').innerHTML = '下拉刷新...';
						} else if (pullUpEl.className.match('loading')) {
							pullUpEl.className = '';
							pullUpEl.querySelector('.pullUpLabel').innerHTML = '上拉加载更多...';
						}
					},
					onScrollMove: function() {
						if (this.y > 5 && !pullDownEl.className.match('flip')) {
							pullDownEl.className = 'flip';
							pullDownEl.querySelector('.pullDownLabel').innerHTML = '松手开始更新...';
							this.minScrollY = 0;
						} else if (this.y < 5 && pullDownEl.className.match('flip')) {
							pullDownEl.className = '';
							pullDownEl.querySelector('.pullDownLabel').innerHTML = '下拉刷新...';
							this.minScrollY = -pullDownOffset;
						} else if (this.y < (this.maxScrollY - 5) && !pullUpEl.className.match('flip')) {
							pullUpEl.className = 'flip';
							pullUpEl.querySelector('.pullUpLabel').innerHTML = '松手开始更新...';
							this.maxScrollY = this.maxScrollY;
						} else if (this.y > (this.maxScrollY + 5) && pullUpEl.className.match('flip')) {
							pullUpEl.className = '';
							pullUpEl.querySelector('.pullUpLabel').innerHTML = '上拉加载更多...';
							this.maxScrollY = pullUpOffset;
						}
					},
					onScrollEnd: function() {
						if (pullDownEl.className.match('flip')) {
							pullDownEl.className = 'loading';
							pullDownEl.querySelector('.pullDownLabel').innerHTML = '加载中...';
							pullDownAction(); // Execute custom function (ajax call?)   
						} else if (pullUpEl.className.match('flip')) {
							pullUpEl.className = 'loading';
							pullUpEl.querySelector('.pullUpLabel').innerHTML = '加载中...';
							pullUpAction(); // Execute custom function (ajax call?)   
						}
					}
				});
				setTimeout(function() {
					document.getElementById('wrapper').style.left = '0';
				}, 800);
			}
			//初始化绑定iScroll控件
			document.addEventListener('touchmove', function(e) {
				e.preventDefault();
			}, false);
			document.addEventListener('DOMContentLoaded', loaded, false);
	</script>
</body>
</html>